<template>
  <div>
    <div>
      <el-tabs type="border-card" @tab-click="tabclickdl">
        <el-tab-pane key="4" name="4" label="全部"></el-tab-pane>
        <el-tab-pane label="待审核" key="0" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" key="1" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" key="2" name="2"></el-tab-pane>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280">
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="80">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="150">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >预览</el-button
              >

              <!-- 预览弹窗 -->
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                :modal="false"
                width="60%"
                :before-close="handleClose"
              >
                <el-descriptions title="题目预览">
                  <el-descriptions-item label="【题型】">{{
                    dialogObject.questionType
                  }}</el-descriptions-item>
                  <el-descriptions-item label="【编号】">{{
                    dialogObject.number
                  }}</el-descriptions-item>
                  <el-descriptions-item label="【难度】">{{
                    dialogObject.difficulty
                  }}</el-descriptions-item>
                  <el-descriptions-item label="【标签】">
                    {{ dialogObject.tags }}</el-descriptions-item
                  >
                  <el-descriptions-item label="【学科】">{{
                    dialogObject.subject
                  }}</el-descriptions-item>
                  <el-descriptions-item label="【目录】">{{
                    dialogObject.catalog
                  }}</el-descriptions-item>
                  <el-descriptions-item label="【方向】">{{
                    dialogObject.direction
                  }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                  ><el-descriptions-item label="【题干】">
                    <div
                      v-html="dialogObject.question"
                    ></div> </el-descriptions-item
                ></el-descriptions>
                <el-descriptions
                  ><el-descriptions-item label="【参考答案】">
                    <el-button type="danger">视频答案预览</el-button>
                  </el-descriptions-item></el-descriptions
                >
                <el-descriptions
                  ><el-descriptions-item label="【答案解析】">
                    999</el-descriptions-item
                  ></el-descriptions
                >
                <el-descriptions
                  ><el-descriptions-item label="【题目备注】">
                    <div
                      v-html="dialogObject.question"
                    ></div> </el-descriptions-item
                ></el-descriptions>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>

              <el-button type="text" size="small" @click="auditclick" disabled
                >审核</el-button
              >
              <!-- 审核弹窗 -->
              <el-dialog
                title="提示"
                :visible.sync="auditdialog"
                width="40%"
                :modal="false"
                :before-close="audithandleClose"
              >
                <div class="auditinput">
                  <el-radio v-model="radio" label="1">通过</el-radio>
                  <el-radio v-model="radio" label="2">拒绝</el-radio>
                </div>
                <!-- 审核意见 -->
                <div>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                  >
                  </el-input>
                </div>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="auditdialog = false">取 消</el-button>
                  <el-button type="primary" :plain="true" @click="auditbtnclick"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>

              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">上架</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { choice as createAPI } from '@/api/hmmm/questions'
// import { watch } from 'vue'
// import { chkType } from '@/api/hmmm/constants'

export default {
  created() {
    this.createAPI()
  },
  data() {
    return {
      tableData: [],
      dialogObject: {},
      dialogVisible: false,
      auditdialog: false,
      radio: '1',
      textarea: '',
      formInlineObject: {
        chkState: '',
        page: 1,
        pagesize: 10,
      },
    }
  },
  methods: {
    // 题库表格
    async createAPI() {
      // 题库表格
      const res = await createAPI(this.formInlineObject) //
      // console.log(res)
      res.data.items.map((item) => {
        // 题型
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        // 难度
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        // 审核状态
        if (item.chkState === '0') {
          item.chkState = '待审核'
        } else if (item.chkState === '1') {
          item.chkState = '通过'
        } else {
          item.chkState = '拒绝'
        }
        // 发布状态
        if (item.publishState === '1') {
          item.publishState = '待发布'
        } else if (item.publishState === '2') {
          item.publishState = '已发布'
        } else {
          item.publishState = '已下架'
        }
      })
      this.tableData = res.data.items
    },

    // 预览
    handleClick(row) {
      this.dialogVisible = true
      this.dialogObject = row
      console.log(row)
    },
    handleClose() {
      this.dialogVisible = false
    },
    // tabs栏
    tabclickdl(val) {
      // console.log(val.name)
      if (val.name !== '4') {
        this.formInlineObject.chkState = val.name
      } else {
        this.formInlineObject.chkState = ''
      }
      this.createAPI()
    },

    // 审核
    audithandleClose() {
      this.auditdialog = false
    },
    auditclick() {
      this.auditdialog = true
    },
    // 审核弹窗确定
    auditbtnclick() {
      if (this.textarea === '') {
        this.auditdialog = true
        this.$message({
          showClose: true,
          message: '请输入审核意见',
          type: 'warning',
        })
      } else {
        this.auditdialog = false
      }
      if (this.radio === '1') {
        this.disabled = true
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success',
        })
      }
      this.textarea = ''
      this.createAPI()
    },
  },
}
</script>

<style scope>
.el-descriptions {
  border-bottom: solid 1px lightgray;
  padding: 5px 0;
}
.dialogClass >>> .el-dialog__footer {
  display: flex;
  justify-content: end;
}
.el-checkbox {
  display: block;
}

.descriptions {
  border-bottom: solid 1px lightgray;
  padding: 5px 0;
}
.auditinput {
  margin-bottom: 20px;
}
</style>